<template>
	<view class="left clearfix bai">
		<uni-popup ref="popup" type="center" :is-mask-click="false">
			<view class="modal-box left clearfix" :style="'width:'+width+'px;height:'+height+'px'">
				<view class="modal-title left clearfix">
					<view class="modal-title-left left ellipsis">
						{{title}}
					</view>
					<view class="modal-close right" @click="closePopup()">
						<uni-icons type="closeempty" size="20" color="#999"></uni-icons>
					</view>
				</view>
				
				<view class="modal-content left clearfix">
					<view class="loader"></view>
					<view class="mocal-content-text left">{{content}}</view>
				</view>
				
				<view class="modal-desc left clearfix">
					{{desc}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style scoped>
	.modal-desc{width:100%;height:30px;line-height:30px;font-size:13px;text-align: center;color:#999;margin-top:20px;}
	.mocal-content-text{width:200px;line-height:53px;height:50px;color:#333;margin-left:10px;font-size:15px;}
	.modal-content{width:100%;height:50px;margin-top:20px;}
	 .loader {border: 7px solid #f3f3f3;border-top: 7px solid #3498db;border-radius: 50%;width: 40px;height: 40px;animation: spin 2s linear infinite;float:left;margin-left:20px;}
	@keyframes spin {
	            0% {
	                transform: rotate(0deg);
	            }
	
	            100% {
	                transform: rotate(360deg);
	            }
	        }
	.modal-close{line-height:40px;margin-right:10px;cursor:pointer;}
	.modal-title-left{width:200px;line-height:40px;margin-left:10px;font-weight:400;}
	.modal-title{width:100%;height:40px;font-size:14px;}
	.modal-box{background:#fff;border-radius: 5px;}
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
	.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	.left{float:left;}
	.right{float:right;}
	.bai{width:100%;}
	
</style>

<script>
	export default {
		name:'zmt-modal',
		data(){
			return {
				
			}
		},
		props:{
			show:{//是否显示
				type:Boolean,
				default:false
			},
			title:{//标题
				type:String,
				default:'我的标题'
			},
			width:{ //弹窗宽度
				type:Number,
				default:300
			},
			height:{ //弹窗高度
				type:Number,
				default:180
			},
			content:{
				type:String,
				default:'正在处理中'
			},
			desc:{
				type:String,
				default:'请勿关闭此页面'
			}
		},
		watch:{
			"show"(val){
				if(val == true){
					this.$refs.popup.open();
				}else if(val == false){
					this.$refs.popup.close();
				}
			}
		},
		methods:{
			//关闭弹窗
			closePopup(){
				this.$emit('close',false);
				this.$refs.popup.close();
			}
		}
	}
</script>

